<template>
  <div class="theme-demo-container">
    <a-layout>
      <a-layout-header class="header">
        <div class="logo">
          <h1 class="logo-text">协创视界</h1>
        </div>
        <div class="menu-container">
          <a-menu
            mode="horizontal"
            :selected-keys="['1']"
            class="menu"
            :collapsed="isMobile"
          >
            <a-menu-item key="1">主题展示</a-menu-item>
            <a-menu-item key="2">组件示例</a-menu-item>
            <a-menu-item key="3">关于项目</a-menu-item>
          </a-menu>
          <a-button v-if="isMobile" class="menu-toggle" type="text">
            <icon-menu />
          </a-button>
        </div>
      </a-layout-header>
      <a-layout-content class="content">
        <theme-showcase />
      </a-layout-content>
      <a-layout-footer class="footer">
        协创视界 © 2023 图片素材协作平台
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onBeforeUnmount } from 'vue';
import ThemeShowcase from '../components/ThemeShowcase.vue';
import { applyCollabVisionTheme } from '../utils/themeConfig';
import { IconMenu } from '@arco-design/web-vue/es/icon';

const isMobile = ref(false);

const checkMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

onMounted(() => {
  // 应用自定义主题
  applyCollabVisionTheme();
  
  // 检查是否为移动设备
  checkMobile();
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', checkMobile);
});

onBeforeUnmount(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', checkMobile);
});
</script>

<style scoped>
.theme-demo-container {
  width: 100%;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  flex-wrap: wrap;
}

.logo {
  margin-right: 40px;
  display: flex;
  align-items: center;
  height: 64px;
}

.logo-text {
  color: var(--primary-color);
  margin: 0;
  font-size: 20px;
}

.menu-container {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu {
  flex: 1;
}

.menu-toggle {
  display: none;
}

.content {
  padding: 0;
  background-color: #f7f8fa;
}

.footer {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  color: #86909c;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .header {
    padding: 0 16px;
  }
  
  .logo {
    margin-right: 20px;
  }
  
  .menu-toggle {
    display: block;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 0 12px;
    flex-direction: row;
    justify-content: space-between;
  }
  
  .logo {
    margin-right: 0;
  }
  
  .logo-text {
    font-size: 18px;
  }
  
  .footer {
    padding: 12px;
    font-size: 12px;
  }
}
</style> 